<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
// 窗口、可视区、页面尺寸：
// document.body.offsetWidth body的宽度
// document.body.clientWidth body的宽度
// document.body.offsetHeight body高度
// document.body.clientHeight body高度

// document.documentElement.offsetWidth html宽度（整个页面的宽度）
// document.documentElement.offsetHeight html高度（整个页面的高度）
// document.documentElement.clientWidth 可视区宽度（不含滚动条宽度）
// document.documentElement.clientHeight 可视区高度（不含滚动条高度）
    
// window.innerWidth 浏览器可视区宽度（包含滚动条的宽度）
// window.innerHeight 浏览器可视区高度（包含滚动条的高度）

// document.documentElement.scrollWidth 页面可滚动内容总宽度（整个页面的宽度）
// document.documentElement.scrollHeight 页面可滚动内容总高度（整个页面的高度）

// 事件：
// 事件是文档或浏览器窗口中的特定行为，可以被JS侦测到
// 事件理函数
// 事件驱动：事件触发，驱动函数执行通常配合函数使用，当事件触发时，执行对应的事件处

// 常用事件类型：
// focus 输入框获得焦点
// blur 输入框失去焦点
// input 输入事件
// change 输入框值改变
// click 单击事件
// dblclick 双击事件
// contextmenu 右键点击
// mouseover 鼠标移入
// mouseout 鼠标移出
// mouseenter 鼠标进入
// mouseleave 鼠标离开
// mousemove 鼠标移动（高频触发）
// mousedown 鼠标按下
// mouseup 鼠标抬起
// keydown 按键按下
// keyup 按键抬起
// keypress 按键按下（按下功能键不能触发事件，ctrl alt shift f1 ...）
// submit form提交
// reset form重置
// resize 窗口大小改变（高频触发）

// 事件模型：
// 事件模型主要讲的是如何添加事件，如何移除事件，事件如何执行

// DOM 0级事件模型：早期的事件模型，所有浏览器都支持
// 添加事件：dom.on+type = 事件处理函数
// 移除事件：dom.on+type = null
// 同一个元素添加多个相同类型的事件，会发生覆盖，只执行最后一个

// DOM 2级事件模型，新出的事件模型，低版本浏览器(IE678)不支持
// 添加事件监听：dom.addEventListener(type,fun,boolean)
// 移除事件监听：dom.removeEventListener(type,fun,boolean)
// type 事件类型，如 click  mousedown ...
// fun 事件处理函数
// boolean 设置事件执行顺序（true捕获，false冒泡，默认false）
// 注意点：移除事件时，事件处理函数必须和添加事件时为同一个函数

// IE事件模型：低版本IE678使用的事件模型

// 触发事件：

// DOM 0级
btn.onclick = function (){
    console.log( 'btn被点击。。。' )
}
btn.onclick();// 触发事件

// DOM 2级
btn.addEventListener('click',function (){
    console.log( 'btn被点击。。。' )  
})
var ev = new Event('click');// 创建事件对象
btn.dispatchEvent(ev);// 触发事件

</script>
</body>
</html>